<template>
	<transition name="set-address-page">
		<div id="set-address-page" v-show="show_page">
			<transition name="set-address-container">
				<div class="container" v-show="show_page">
					<div class="set-address-page-header">
						<b-icon-x class="close-btn" @click="close" />
					</div>
					<div class="set-address-page-content">
						<p class="set-address-page-select-tips">请选择收货地址</p>
						<div class="set-address-page-select-list">
							<b-card :class="'set-address-address ' + (item.id == active.id ? 'set-address-select-item-selected' : '')" v-for="(item, index) in list" :key="index" @click='change_address(index)'>
								<div class="set-address-address-flexbox">
									<div class="set-address-address-content">
										<div class="set-address-address-content-address">{{ item.address }}</div>
										<div class="set-address-address-content-name">{{ item.name }}</div>
										<div class="set-address-address-content-telphone">{{ item.tel }}</div>
									</div>
								</div>
							</b-card>
						</div>
						<div class="set-address-foot">
							<b-button variant="primary" class="set-address-set-btn" ref="set_btn" @click="setAddress">确 定</b-button>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</transition>
</template>

<script>
	import {BIcon, BIconX } from 'bootstrap-vue'
	import layer from 'layui-layer'
	
	export default {
		inject: [
			'reload_view'
		],
		components: {
			BIcon,
			BIconX
		},
		data() {
			return {
				show_page: false,
				display: false,
				active: {}
			};
		},
		props: {
			show: false,
			list: null,
			default: {}
		},
		methods: {
			page_display() {
				this.display = !this.display
			},
			close() {
				this.$emit('update:show', false)
			},
			change_address(index){
				this.active = this.list[index]
			},
			setAddress() {
				this.close()
				this.$emit('update:default', this.active)
			}
		},
		mounted() {
			this.show_page = this.show
		},
		watch: {
			show(newVal, oldVal){
				this.show_page = newVal
				this.display = this.show
			},
			default(newVal, oldVal) {
				this.active = newVal
			}
		}
	}
</script>

<style>
	#set-address-page {
		z-index: 2147483647;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
	}
	#set-address-page .container {
		margin-top: 3vh;
		padding: 0.625rem;
		height: 97vh;
		background-color: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	
	.set-address-page-enter-active, .set-address-page-leave-active {
		transition: all .3s ease;
	}
	.set-address-page-enter-active {
		opacity: 1;
	}
	.set-address-page-leave-to {
		opacity: 0;
	}
	
	.set-address-container-enter-active, .set-address-container-leave-active {
		transition: all .2s ease;
	}
	.set-address-container-enter, .set-address-container-leave-to {
		transform: translateY(6.25rem);
		opacity: 0;
	}
	
	.close-btn {
		float: left;
		font-size: 1.5625rem;
	}
	
	.set-address-page-header {
		height: 1.25rem;
		margin: 0.3125rem auto;
	}
	.set-address-page-content {
		padding-top: 1.25rem;
	}
	.set-address-page-select-tips {
		font-size: 1.5625rem;
	}
	
	.set-address-address {
		margin-bottom: 0.9375rem;
		border-color: #f8f9fa;
		user-select: none;
		cursor: pointer;
	}
	.set-address-address-flexbox {
		display: flex;
		flex-direction: row;
	}
	.set-address-address-content {
		width: calc(100% - 3rem);
	}
	.set-address-address-content-address {
		font-size: 1.25rem;
		margin-bottom: 0.9375rem;
	}
	.set-address-address-content-name, .set-address-address-content-telphone {
		display: inline-block;
		margin-right: 0.625rem;
		color: #666
	}
	.set-address-address-btn {
		width: 3rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		color: #666666;
		user-select: none;
		cursor: pointer;
	}
	.set-address-page-select-list {
		height: calc(97vh - 12rem);
		overflow-y: auto;
	}

	.set-address-select-item-selected {
		border-color: #0069d9
	}
	
	.set-address-foot {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 1.875rem;
	}
	.set-address-set-btn {
		width: 100%;
		max-width: 50rem;
	}
</style>
